<template>
    <div class="app-container">
        <el-tabs>
            <el-tab-pane label="分配宿舍">
                <div class="steps1">
                    <searchForm :formOptions="formOptions" @onSearch="onSearch" @onReset="onReset" />
                    <el-table :data="tableData" style="width: 100%">
                        <el-table-column type="expand">
                            <template slot-scope="props">
                                <el-form label-position="left" inline class="demo-table-expand">
                                    <el-form-item label="姓名">
                                        <span>{{ props.row.name }}</span>
                                    </el-form-item>
                                    <el-form-item label="注册号">
                                        <span>{{ props.row.registerCode }}</span>
                                    </el-form-item>
                                    <el-form-item label="性别">
                                        <dict-tag :options="dict.type.sys_user_sex" :value="props.row.sex"></dict-tag>
                                    </el-form-item>
                                    <el-form-item label="生源地">
                                        <span>{{ props.row.ofStudent }}</span>
                                    </el-form-item>
                                    <el-form-item label="出生日期">
                                        <span>{{ props.row.birthday }}</span>
                                    </el-form-item>
                                    <el-form-item label="民族">
                                        <span><dict-tag :options="dict.type.bc_nation_type"
                                                :value="props.row.nation"></dict-tag></span>
                                    </el-form-item>
                                    <el-form-item label="所在院部">
                                        <span>{{ props.row.deptNames }}</span>
                                    </el-form-item>
                                    <el-form-item label="班级">
                                        <span>{{ props.row.className }}</span>
                                    </el-form-item>
                                    <el-form-item label="宿舍费">
                                        <span>{{ props.row.studentBay.zsf }}</span>
                                    </el-form-item>
                                    <el-form-item label="缴费状态">
                                        <span>{{ props.row.studentBay.zsfjfzt }}</span>
                                    </el-form-item>
                                    <el-form-item label="宿舍楼">
                                        <span>{{ studentDormAllocationInfolist.houseName }}</span>
                                    </el-form-item>
                                    <el-form-item label="宿舍">
                                        <span>{{ studentDormAllocationInfolist.roomNo }}</span>
                                    </el-form-item>
                                </el-form>
                            </template>
                        </el-table-column>
                        <el-table-column label="姓名" prop="name" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column label="注册号" prop="registerCode" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column label="性别" prop="sex" show-overflow-tooltip>
                            <template slot-scope="{row}">
                                <dict-tag :options="dict.type.sys_user_sex" :value="row.sex"></dict-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="生源地" prop="ofStudent" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column label="出生日期" prop="birthday">
                        </el-table-column>
                        <el-table-column label="民族" prop="nation">
                            <template slot-scope="{row}">
                                <dict-tag :options="dict.type.bc_nation_type" :value="row.nation"></dict-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="所在院部" prop="deptNames" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column label="班级" prop="className" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column label="宿舍费" prop="studentBay.zsf" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column label="缴费状态" prop="studentBay.zsfjfzt" show-overflow-tooltip>
                        </el-table-column>
                    </el-table>
                </div>

                <div class="steps2">
                    <searchForm :formOptions="dormOptions" @onSearch="dormSearch" @onReset="dormReset"
                        ref="dormSearchref" />
                    <el-row :gutter="10" class="mb8">
                        <el-col :span="1.5">
                            <el-button type="primary" plain icon="el-icon-edit-outline" size="mini"
                                @click="bedBuildStudent">分配</el-button>
                        </el-col>
                        <el-col :span="1.5">
                            <el-button type="primary" plain icon="el-icon-s-open" size="mini"
                                @click="clearAllot">撤销</el-button>
                        </el-col>
                    </el-row>
                    <el-table :data="bedData" style="width: 100%" class="radio">
                        <el-table-column width="60" align="center">
                            <template slot-scope="{row}">
                                <el-radio v-model="selectBedId" size="medium" border :label="row.bedId"><span
                                        style="display: none;"></span></el-radio>
                            </template>
                        </el-table-column>
                        <el-table-column label="楼号" prop="houseName" :show-overflow-tooltip="true" align="center" />
                        <el-table-column label="层号" prop="floorNo" align="center" show-overflow-tooltip />
                        <el-table-column label="房间号" prop="roomNo" align="center" show-overflow-tooltip />
                        <el-table-column label="床位号" prop="bedNo" align="center" show-overflow-tooltip />
                        <el-table-column label="学生" prop="studentname" align="center" show-overflow-tooltip>
                            <template slot-scope="scope">
                                {{ scope.row.studentname }}
                            </template>
                        </el-table-column>
                        <el-table-column label="入住时间" show-overflow-tooltip prop="stayTime" align="center" />
                        <el-table-column label="院系" show-overflow-tooltip prop="college" align="center" />
                        <el-table-column label="班级" show-overflow-tooltip prop="className" align="center" />
                        <el-table-column label="标记" prop="smark" align="center">
                            <template slot-scope="scope">
                                <dict-tag :options="dict.type.basic_student_mark" :value="scope.row.smark"></dict-tag>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column label="操作" align="center" width="180" fixed="right" v-hasPermi="['dorm:bed:remove']">
                            <template slot-scope="scope">
                                <el-button size="mini" v-show="scope.row.studentname" type="text"
                                    @click="clearStudent(scope.row)">清除学生</el-button>
                            </template>
                        </el-table-column> -->
                    </el-table>
                </div>
            </el-tab-pane>
            <el-tab-pane label="学生住宿历史">
                <el-table :data="allocationInfolist">
                    <el-table-column prop="college" width="140" show-overflow-tooltip label="院系"> </el-table-column>
                    <el-table-column prop="specialityName" width="140" label="专业" show-overflow-tooltip> </el-table-column>
                    <el-table-column prop="className" width="160" label="班级" show-overflow-tooltip> </el-table-column>
                    <el-table-column prop="studentName" width="80" label="学生姓名" show-overflow-tooltip> </el-table-column>
                    <el-table-column prop="name" label="性别" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex"></dict-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="houseName" width="80" label="楼号" show-overflow-tooltip> </el-table-column>
                    <el-table-column prop="roomNo" width="80" label="房间号" show-overflow-tooltip> </el-table-column>
                    <el-table-column prop="studentNo" width="100" label="注册号" show-overflow-tooltip> </el-table-column>
                    <el-table-column prop="createName" width="80" label="分配人" show-overflow-tooltip> </el-table-column>
                    <el-table-column prop="createTime" width="140" label="分配时间" show-overflow-tooltip> </el-table-column>
                    <el-table-column prop="allocationType" width="80" label="分配方式" show-overflow-tooltip> </el-table-column>
                    <el-table-column prop="changeReason" label="操作原因" show-overflow-tooltip> </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="{row}">
                            <el-button v-if="row.allocationType && row.allocationType.includes('入住')" size="mini"
                                type="text" @click="printAllotDetails(row)">通知单</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
        <PrintPaper ref="printPaperRef"></PrintPaper>

        <el-dialog title="请选择撤销原因" size="small" :visible.sync="dialogVisible" width="20%" :before-close="handleClose">
            <el-select v-model="changeReason" clearable placeholder="请选择" style="width: 100%">
                <el-option v-for="dict in dict.type.dorm_change_reason" :key="dict.value" :label="dict.label"
                    :value="dict.value"></el-option>
            </el-select>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="delInfo">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import searchForm from "@/components/Search/searchForm.vue";
import {
    queryStudent,
} from "@/api/information/studentInfor";
import { getDormAllocationInfolist } from "@/api/apartment/roomBedlist"
import {
    list as floorList
} from '@/api/apartment/apartmentBuilding'
import {
    list as roomList
} from '@/api/apartment/apartmentRoom'
import {
    list as bedList,
    getuserBedLog,
    addInfo,
    delInfoById
} from '@/api/apartment/roomBedlist'
import PrintPaper from "./printPaper.vue"
export default {
    components: {
        searchForm,
        PrintPaper
    },
    data() {
        return {
            formOptions: [
                {
                    label: "注册号",
                    prop: "registerCode",
                    element: "el-input",
                    placeholder: "请输入注册号",
                },
            ],
            dialogVisible: false,
            changeReason: null,
            dormOptions: [
                {
                    label: "宿舍编号",
                    prop: "roomNumber",
                    element: "el-input",
                    initValue: '',
                    placeholder: "请输入宿舍编号",
                }, {
                    label: "宿舍楼",
                    prop: "floorId",
                    element: "el-select",
                    options: [],
                    initValue: '',
                    placeholder: "请选择宿舍楼",
                    events: {
                        change: this.floorChange
                    }
                }, {
                    label: "宿舍",
                    prop: "roomId",
                    element: "el-select",
                    initValue: '',
                    options: [
                    ],
                    placeholder: "请选择宿舍",
                    events: {
                        change: this.roomChange
                    }
                },
            ],
            tableData: [],
            studentInfo: {},
            studentDormAllocationInfolist: {},
            allocationInfolist: [],
            floorData: [],
            roomData: [],
            bedData: [],
            bedParams: {
                roomId: '',
                roomCode: ''
            },
            selectBedId: null
        };
    },
    dicts: [
        "sys_user_sex",
        "basic_student_mark",
        "bc_nation_type",
        "dorm_change_reason"
    ],
    created() {
        this.getFloor()
    },
    mounted() {

    },
    methods: {
        floorChange(e) {
            roomList({
                houseId: e,
                pageSize: 999999
            }).then((res) => {
                this.roomData = res.rows.map((item) => {
                    return {
                        label: item.roomNo,
                        value: item.roomId
                    }
                })
                this.dormOptions[2].options = this.roomData
            })
        },
        roomChange(e) {
            this.bedParams.roomId = e
        },
        getBedInfo() {
            bedList(this.bedParams).then((res) => {
                this.bedData = res.rows
            })
        },
        dormSearch(data) {
            if (!data.roomNumber && !data.roomId) {
                this.$message.warning("请输入宿舍编号或选择宿舍");
                return
            }
            this.bedParams = {
                roomId: data.roomId,
                roomNumber: data.roomNumber
            }
            this.getBedInfo()
        },
        dormReset(data) {
            console.log(data)
            this.bedParams = {
                roomId: '',
                roomNumber: ''
            }
            this.bedData = []
            this.selectBedId = ''
        },

        onSearch(data) {
            if (!data.registerCode) {
                this.$message.warning("请输入注册号");
                return
            }
            this.getStudentInfo(data)
            this.getAllotLog(data)
        },
        // 获取学生信息
        getStudentInfo(data) {
            queryStudent({
                registerOrSno: data.registerCode
            }).then((res) => {
                if (res.data) {
                    this.studentInfo = res.data
                    this.tableData = [res.data]
                } else {
                    this.$message.warning("未搜索到对应学生");
                }
            })
            this.allocationInfolist = []
            getDormAllocationInfolist({
                studentNo: data.registerCode
            }).then(res => {
                let studentInfo = res.rows[0];
                this.studentDormAllocationInfolist = studentInfo
                if (res.rows.length && (studentInfo.studentNo == data.registerCode) && studentInfo.roomNo) {
                    this.$message.warning(`该学生已被分配到${studentInfo.houseName}/${studentInfo.floorNo}层/${studentInfo.roomNo}`)
                    // this.allocationInfolist.push(data)
                    console.log(this.$refs.dormSearchref)
                    this.dormOptions[0].initValue = studentInfo.roomNumber
                    this.dormOptions[1].initValue = Number(studentInfo.houseId)
                    this.floorChange(studentInfo.houseId)
                    this.dormOptions[2].initValue = Number(studentInfo.roomId)
                    this.$refs.dormSearchref.addInitValue()
                } else {
                    // this.initEmptyInput()
                }
            })
        },

        // 初始化 没查询到人后的初始信息
        initEmptyInput() {
            // Object.assign(this.dormOptions,this.$options.data().dormOptions)
            this.dormOptions[0].initValue = ''
            this.dormOptions[1].initValue = ''
            this.dormOptions[2].initValue = ''

            this.$refs.dormSearchref.addInitValue()
            this.tableData = []
        },
        // 获取分配记录
        getAllotLog(data) {
            getuserBedLog({
                studentNo: data.registerCode
            }).then(res => {
                this.allocationInfolist = res.rows
            })
        },
        // 获取宿舍楼
        getFloor() {
            floorList({
                pageSize: 999999
            }).then((res) => {
                this.floorData = res.rows.map((item) => {
                    return {
                        label: item.houseName,
                        value: item.houseId
                    }
                })
                this.dormOptions[1].options = this.floorData
            })
        },
        printAllotDetails(rowdata) {
            this.$refs.printPaperRef.open({...rowdata, ofStudent: this.studentInfo.ofStudent})
        },
        // 床位分配学生
        bedBuildStudent() {
            if (Object.keys(this.studentInfo).length == 0) {
                this.$message.warning("未检测到学生信息")
                return
            }
            const bedInfo = this.bedData.find((item) => {
                return this.selectBedId == item.bedId
            })
            if (!bedInfo || !this.selectBedId) {
                this.$message.warning("未检测到床位信息")
                return
            }
            console.log(this.studentInfo, bedInfo)

            this.$modal
                .confirm(
                    `确认分配学生：${this.studentInfo.name}至
                ${bedInfo.houseName}
                ${bedInfo.floorNo.includes("层") ? bedInfo.floorNo : bedInfo.floorNo + '层'}
                ${bedInfo.roomNo.includes("房间") ? bedInfo.roomNo : bedInfo.roomNo + '房间'}
                ${bedInfo.bedNo + '床位'}？`)
                .then(() => {
                    addInfo({
                        roomId: bedInfo.roomId,
                        bedId: bedInfo.bedId,
                        studentId: this.studentInfo.id
                    }).then((res) => {
                        if (res.code == 200) {
                            this.getBedInfo()
                            this.getAllotLog({
                                registerCode: this.studentInfo.registerCode
                            })
                            this.$modal
                                .confirm(
                                    `分配成功是否打印住宿通知单？`)
                                .then(() => {
                                    this.$refs.printPaperRef.open({
                                        houseName: bedInfo.houseName,
                                        studentName: this.studentInfo.name,
                                        studentNo: this.studentInfo.registerCode,
                                        sex: this.studentInfo.sex,
                                        college: this.studentInfo.deptNames,
                                        className: this.studentInfo.className,
                                        roomNo: bedInfo.roomNo,
                                        bedNo: bedInfo.bedNo,
                                        ofStudent: this.studentInfo.ofStudent,
                                    })
                                })
                                .catch(() => {

                                });
                        }
                    })
                })
                .catch(() => {

                });
        },
        onReset(data) {
            this.tableData = []
            this.studentInfo = {}
            this.allocationInfolist = []
        },
        clearAllot() {
            const bedInfo = this.bedData.find((item) => {
                return this.selectBedId == item.bedId
            })
            if (!bedInfo || !this.selectBedId) {
                this.$message.warning("未检测到床位信息")
                return
            }
            if (!bedInfo.studentname) {
                this.$message.warning("未检测到该床位有学生入驻")
                return
            }
            this.dialogVisible = true
            return;
            this.$modal
                .confirm(
                    `确认将${bedInfo.studentname}从
                ${bedInfo.houseName}
                ${bedInfo.floorNo.includes("层") ? bedInfo.floorNo : bedInfo.floorNo + '层'}
                ${bedInfo.roomNo.includes("房间") ? bedInfo.roomNo : bedInfo.roomNo + '房间'}
                ${bedInfo.bedNo + '床位'}撤销吗？`)
                .then(() => {
                    delInfoById({
                        bedIds: bedInfo.bedId,
                    }).then((res) => {
                        if (res.code == 200) {
                            this.getBedInfo()
                            this.$message.success("撤销床位成功。");
                        }
                    })
                })
                .catch(() => {

                });

        },
        delInfo() {
            if (!this.changeReason) {
                this.$message.warning("请选择撤销原因");
                return;
            }
            const bedInfo = this.bedData.find((item) => {
                return this.selectBedId == item.bedId
            })
            this.$modal
                .confirm(
                    `确认将${bedInfo.studentname}从
                ${bedInfo.houseName}
                ${bedInfo.floorNo.includes("层") ? bedInfo.floorNo : bedInfo.floorNo + '层'}
                ${bedInfo.roomNo.includes("房间") ? bedInfo.roomNo : bedInfo.roomNo + '房间'}
                ${bedInfo.bedNo + '床位'}撤销吗？`)
                .then(() => {
                    delInfoById({
                        bedIds: bedInfo.bedId,
                        changeReason: this.changeReason
                    }).then((res) => {
                        if (res.code == 200) {
                            this.getBedInfo()
                            this.changeReason = null,
                                this.$message.success("撤销床位成功。");
                            this.dialogVisible = false
                        }
                    })
                })
                .catch(() => {

                });

        }
    },

};
</script>

<style lang="scss" scoped>
.demo-table-expand {
    font-size: 0;
}

.demo-table-expand label {
    width: 90px;
    // color: #99a9bf;
}

.demo-table-expand {
    .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
}

.steps2 {
    margin-top: 12px;
}
</style>
<style lang="scss">
.radio {
    .el-radio {

        .el-radio__label {
            display: none;
        }

    }

    .is-bordered {
        padding: 10px 10px 0 10px !important
    }
}
</style>
